<template>
  <div class="flex container">
    <el-menu :default-active="'/'" class="menu" :collapse="isCollapse" @open="handleOpen" @close="handleClose"
      active-text-color="#fff" background-color="#545c64" router>
      <template v-for="item in menuList" :key="item.name">
        <el-menu-item :index="item.path">
          <el-icon>
            <setting />
          </el-icon>
          <template #title>{{ item.name }}</template>
        </el-menu-item>
      </template>
    </el-menu>

    <div class="container-right flex-1">
      <router-view></router-view>
    </div>
  </div>

</template>


<script setup>
import { ref } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

import { useRoute } from 'vue-router';

const route = useRoute();

console.log(route, 'route-----------');


const menuList = ref([
  {
    path: '/',
    name: 'Home',
  },
  {
    path: '/about',
    name: 'About',
  }
])
</script>



<style scoped>
.menu {
  height: 100vh;
  width: 200px;
}

.container {
  width: 100vw;
}

.container-right {
  padding: 20px;
  height: 100vh;
  overflow: auto;
}
</style>
